<template>
    <div class="contactPage">
        <div class="contactList">
            <!-- 分组 -->
            <ContactGroup 
                v-for="(item,index) in friendsGroupList" 
                :key="index"
                :group-name="item.groupName"
                :expanded="item.expanded"
                :count="item.contactGroupItemList.length"
                :contactGroupItemList="item.contactGroupItemList"
                @clickContactGroupItemEmit="clickContactGroupItemMethod"
                />
        </div>
        <div class="contactDefailt" v-if="userInfo.uniqueId">
            <AccountView :userInfo="userInfo"/>
        </div>
    </div>
</template>
<script>
import ContactGroup from '@/components/ContactGroup.vue';
import AccountView from '@/components/AccountView.vue';
import { instance } from '@/socketio';
export default {
    name: 'AdView',
    components: {
        ContactGroup,
        AccountView,
    },
    data(){
        return {
            // 用户信息
            userInfo: {},
            // 分组信息
            friendsGroupList: [],
        }
    },
    created(){
        instance.on('friendsList', obj => {
            console.log('friendsList', obj);
            if(obj.code === 20000){
                this.friendsGroupList = obj.friendsGroupList;
            }
        });
        instance.on('errorFriendsList', obj=>{
            console.log('errorFriendsList', obj);
        });
    },
    // 在页面加载完成后获取好友列表
    mounted(){
        this.getFriendsList();
    },
    beforeCreate(){
        instance.off('friendsList');
        instance.off('errorFriendsList');
    },
    methods: {
        clickContactGroupItemMethod(item){
            this.userInfo = item;
        },
        // 获取好友列表
        getFriendsList(){
            if(this.$store.state.token){
                instance.emit('friendsList', {
                    token: this.$store.state.token,
                });
            }
        }
    },
}
</script>
<style scoped>
.contactPage{
    display: flex;
    height: 100%;
}
.contactList{
    width: 210px;
    box-sizing: border-box;
    overflow-y: scroll;
    background: var(--contactListBackground);
}
.contactDefailt{
    flex: 1;
}
</style>